<template>
	<view class="content">
		<view class="header">
			<view class="left" @click="menuShow = true">新建<u-icon name="plus-circle" size="44"></u-icon></view>
			<view class="center">工作日历</view>
			<view class="right"></view>
		</view>
		<zui-calendar class="calendar" :key="upDatakey" :list="list" :isShrink="true" :extraData="extraData" @click-active="clickActive" @click-task="clickTask">
			<template slot="task">
				<view class="calendar-box">
					<view class="item border-right">
						<view class="title sale">销售</view>
						<view class="item-item" @click="clickTask(elem)" v-for="(elem,i) of xsList" :key="i">
							<view class="child-item-title">
								<view>{{elem.biz1}}</view>
								<view class="icon" @click.stop="openMore(elem)"><u-icon name="setting-fill" size="40"></u-icon></view>
							</view>
							<view class="child-item-content">
								<view class="child-item-time">{{elem.planDayFrom ? elem.planDayFrom.substring(0,10) : ""}}</view>
								<view :class="['child-item-progress',{'success' : elem.status === 'y'},{'ing': elem.status === 'o'}]">{{elem.statusName}}</view>
							</view>
							
						</view>
						<u-empty text="暂无事项" mode="" margin-top="-50" v-if="xsList.length === 0"></u-empty>
					</view>
					<view class="item">
						<view class="title gz">跟踪</view>
						<view class="item-item" @click="clickTask(elem)" v-for="(elem,i) of gzList" :key="i">
							<view class="child-item-title">
								<view>{{elem.biz1}}</view>
								<view class="icon" @click.stop="openMore(elem)"><u-icon name="setting-fill" size="40"></u-icon></view>
							</view>
							<view class="child-item-content">
								<view class="child-item-time">{{elem.planDayFrom ? elem.planDayFrom.substring(11,19) : ""}}</view>
								<view :class="['child-item-progress',{'success' : elem.status === 'y'},{'ing': elem.status === 'o'}]">{{elem.statusName}}</view>
							</view>
						</view>
						<u-empty text="暂无事项" mode="" margin-top="-50" v-if="gzList.length === 0"></u-empty>
					</view>
					<view class="item border-right">
						<view class="title xm">项目</view>
						<view class="item-item" @click="clickTask(elem)" v-for="(elem,i) of xmList" :key="i">
							<view class="child-item-title">
								<view>{{elem.biz1}}</view>
								<view class="icon" @click.stop="openMore(elem)"><u-icon name="setting-fill" size="40"></u-icon></view>
							</view>
							<view class="child-item-content">
								<view class="child-item-time">{{elem.planDayFrom ? elem.planDayFrom.substring(0,10) : ""}}</view>
								<view :class="['child-item-progress',{'success' : elem.status === 'y'},{'ing': elem.status === 'o'}]">{{elem.statusName}}</view>
							</view>
						</view>
						<u-empty text="暂无事项" mode="" margin-top="-50" v-if="xmList.length === 0"></u-empty>
					</view>
					<view class="item">
						<view class="title other">其他</view>
						<view class="item-item" @click="clickTask(elem)" v-for="(elem,i) of qtList" :key="i">
							<view class="child-item-title">
								<view>{{elem.biz1}}</view>
								<view class="icon" @click.stop="openMore(elem)"><u-icon name="setting-fill" size="40"></u-icon></view>
							</view>
							<view class="child-item-content">
								<view class="child-item-time">{{elem.planDayFrom ? elem.planDayFrom.substring(0,10) : ""}}</view>
								<view :class="['child-item-progress',{'success' : elem.status === 'y'},{'ing': elem.status === 'o'}]">{{elem.statusName}}</view>
							</view>
						</view>
						<u-empty text="暂无事项" mode="" margin-top="-50" v-if="qtList.length === 0"></u-empty>
					</view>
				</view>
			</template>
		</zui-calendar>
		<u-select v-model="menuShow" :list="menuList" @confirm="selectConfirm"></u-select>
		<u-select v-model="moreShow" :list="moreList" @confirm="selectMoreConfirm"></u-select>
		<u-select v-model="personShow" :list="personList" @confirm="selectPersonConfirm"></u-select>
	</view>
</template>

<script>
/*  */
export default {
    data() {
        return {
            list: [],
			xsList: [],
			gzList: [],
			xmList: [],
			qtList: [],
            upDatakey: '',//为重新渲染DOM值，入不需要则可取消
            extraData:[{date: '2025-03-15', value: '未签到', status: false, dot: false, active: false},{date: '2025-03-16', value: '签到', status: true, dot: false, active: false}],
			menuList: [
				{
					value: '新建事项',
					label: '新建事项'
				},
				{
					value: '下单',
					label: '下单'
				}
			],
			moreList: [
				{
					value: '转办',
					label: '转办'
				},
				{
					value: '协办',
					label: '协办'
				}
			],
			ctrlType: "",
			personList: [],
			menuShow: false,
			moreShow: false,
			personShow: false,
			taskInfo: null,
			searchDate: this.wfy.format('yyyy-MM-dd',new Date())
        }
    },
	onShow() {
		// this.searchDate = this.wfy.format('yyyy-MM-dd',new Date());
		this.searchEmpList();
		this.searchData()
	},
    methods: {
		searchEmpList(){
			this.$api.user.getDeptEmpList({
				
			}).then((res) => {
				this.personList = [];
				res.forEach((item) => {
					this.personList.push(
						{
							value: item.id,
							label: item.empName
						}
					)
				})
			})
		},
		searchData(){
			this.$api.user.pageCrmBasWps({
				deptEmpNo: uni.getStorageSync("THCRMUSERCODE"),
				planDayFrom: this.searchDate
			}).then((res) => {
				console.log("res",res);
				this.list = res.records;
				this.list.forEach((item) => {
					item.statusName = item.status === "o" ? "进行中" : "已完成";
				})
				this.xsList = this.list.filter((item) => {
					return item.planBussType === "销售"
				})
				this.gzList = this.list.filter((item) => {
					return item.planBussType === "跟踪"
				})
				this.xmList = this.list.filter((item) => {
					return item.planBussType === "项目"
				})
				this.qtList = this.list.filter((item) => {
					return item.planBussType === "其他"
				})
				console.log("this.xsList",this.xsList);
			})
		},
        // 点击日数方法
        clickActive({year, month, date, index}){
            console.log(year, month, date, index)
			this.searchDate = date;
			this.searchData()
        },
		openMore(el){
			if(el.status === "y"){
				uni.showToast({
					title: '事项已完成',
					duration: 2000,
					icon: "none"
				});
				return;
			}
			this.taskInfo = el;
			this.moreShow = true;
		},
        // 点击任务方法
        clickTask(row, index){
            console.log(row, index)
			uni.setStorageSync('CRMSomeThing', row);
			uni.navigateTo({
				url: '/pages/something/something?id=1&name=uniapp'
			});
        },
		selectMoreConfirm(res){
			console.log("res",res);
			this.ctrlType = res[0].value;
			this.personShow = true;
		},
		selectPersonConfirm(res){
			console.log("res",res);
			console.log("this.ctrlType",this.ctrlType);
			if(this.ctrlType === "转办"){
				this.$api.user.transferOffice({
					crmPlanDayWorkId: this.taskInfo.id,
					userIdDest: res[0].value
				}).then((res) => {
					uni.showToast({
						title: '转办完成',
						duration: 2000,
						icon: "none",
						success: () => {
							this.searchData()
						}
					});
				})
			}
			if(this.ctrlType === "协办"){
				this.$api.user.copyOffice({
					crmPlanDayWorkId: this.taskInfo.id,
					userIdDest: res[0].value
				}).then((res) => {
					uni.showToast({
						title: '协办完成',
						duration: 2000,
						icon: "none",
						success: () => {
							this.searchData()
						}
					});
				})
			}
		},
		selectConfirm(res){
			console.log("res",res);
			if(res[0].value === "新建事项"){
				uni.navigateTo({
					url: '/pages/something/new-something?id=1&name=uniapp'
				});
			}
			if(res[0].value === "下单"){
				uni.navigateTo({
					url: '/pages/order/order?id=1&name=uniapp'
				});
			}
		}
    }
}
</script>

<style lang="scss" scoped>
	.header{
		display: flex;
		height: 100rpx;
		margin-top: var(--status-bar-height);
		.right{
			width: 20%;
		}
		.center{
			width: 60%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: bold;
			font-size: 40rpx;
		}
		.left{
			width: 20%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #2b85e4;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	.content{
		height: 100vh;
		overflow-y: scroll;
		
	}
	.calendar{
		height: calc(100vh - 100rpx);
		overflow-y: scroll;
	}
	::v-deep .date-top{
		padding: 0 !important;
	}
	.calendar-box{
		height: 750rpx;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		.border-right{
			border-right: 2rpx solid #cccccc;
		}
		.item{
			height: 50%;
			padding: 10rpx;
			width: 50%;
			.title{
				font-size: 44rpx;
				font-weight: bold;
				text-align: center;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				
			}
			.sale{
				color: #2b85e4;
			}
			.gz{
				color: #fa3534;
			}
			.xm{
				color: #19be6b;
			}
			.other{
				color: #ff9900;
			}
			.item-item{
				font-size: 30rpx;
				text-align: center;
				height: 140rpx;
				border-bottom: 2rpx solid #cccccc;
				padding: 10rpx 0;
				.child-item-title{
					font-size: 30rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					display: flex;
					justify-content: space-between;
					font-weight: bold;
				}
				.child-item-content{
					font-size: 30rpx;
					text-align: center;
					height: 60rpx;
					line-height: 60rpx;
					display: flex;
					justify-content: space-between;
					.child-item-progress{
						font-weight: bold;
					}
				}
				.success{
					color: #19be6b;
				}
				.no-start{
					color: #ff9900;
				}
				.ing{
					color: #2b85e4;
				}
			}
			
		}
	}
</style>
